// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
const fileinclude = require('gulp-file-include');
var browserSync = require('browser-sync').create(); 
// 使用gulp.task建立任务

// css任务
// 1.less语法转换
gulp.task('css', (cb) => {
	// 选择css目录下的所有less文件以及css文件
	gulp.src(['./less/*.less'])
		// 将less语法转换为css语法
		.pipe(less())
		// 将处理的结果进行输出
		.pipe(gulp.dest('./dist/css'))
	cb()
});

gulp.task('reload', function(cb){
	browserSync.reload();
	cb()
});

//定义livereload任务
gulp.task('connect', function (cb) {
	browserSync.init({
		open: true,
        port:3000,
        server: {
			baseDir: ["./dist/","./"],
			index: "./dist/index.html"
        }
    });
});

gulp.task('html',function(cb){
	gulp.src('./html/*.html')
	.pipe(fileinclude({
		prefix: '@@',
		basepath: '@file'
	}))
	.pipe(gulp.dest('./dist'))
	cb()
})

gulp.task('js',function(cb){
	gulp.src('./js/*.js')
	.pipe(gulp.dest('./dist/js'))
	cb()
})

//定义看守任务
gulp.task('watch', function (cb) {
	gulp.watch(['dist/*.html', 'dist/css/*.css'], gulp.series('reload'));
	gulp.watch('less/**/*.less', gulp.series('css'));
	gulp.watch('html/**/*.html', gulp.series('html'));
	gulp.watch('js/**/*.js', gulp.series('js'));
	cb()
});
// 构建任务
gulp.task('default', gulp.series(gulp.parallel('css', 'html', 'js','watch', 'connect')));